<template>
  <div class="index" :style="{minHeight:minHeight}">
    <!-- 顶层轮播 -->
    <nav class="index_nav" :style="{height:bannerHeight}">
      <div class="swipe-wrapper" :style="{height:imgHeight}">
        <mt-swipe :auto="4000">
          <mt-swipe-item v-for="(item, index) in swipeList" :key="index">
            <a @click="changeRouter(item.targettype,item.targetid)">
              <img v-bind:src="item.coverurl" :style="{height:imgHeight}" />
            </a>
          </mt-swipe-item>
        </mt-swipe>
      </div>
    </nav>
    <!-- 公共课 -->
    <div class="public_courses_container">
      <header class="public_course_header">
        <span class="title" id="public">公共课</span>
      </header>

      <div class="course_container">
        <div class="course_item" v-for="(item, index) in allPublicCourseListNine" :key="item.index">
          <router-link :to="'/index/courseInfo?courseid='+item.courseid" class="router-item">
            <figure>
              <img v-bind:src="item.iconurl">
              <figcaption>{{item.title}}</figcaption>
            </figure>
          </router-link>
        </div>
        <template v-if="this.pubCourseList.length > 4">
          <div v-if="!publicOpened" class="course_item" @click="changePublicOpenStatus()">
            <figure>
              <img :src="openIcon">
              <figcaption>更多</figcaption>
            </figure>
          </div>
          <div v-else class="course_item" @click="changePublicOpenStatus()">
            <figure>
              <img :src="closeIcon">
              <figcaption>收起</figcaption>
            </figure>
          </div>
        </template>
      </div>
    </div>

    <!-- 所有课程 -->
    <div class="all_courses_container">
      <header class="all_course_header">
        <span>专业课</span>
      </header>
      <div class="course_container">
        <div class="course_item" v-for="(item, index) in allCourseListNine" :key="item.index">
          <router-link :to="'/index/courseInfo?courseid='+item.courseid" class="router-item">
            <figure>
              <img v-bind:src="item.iconurl">
              <figcaption>{{item.title}}</figcaption>
            </figure>
          </router-link>
        </div>
        <template v-if="this.allCourseList.length>9">
          <div v-if="!opened" class="course_item" @click="changeOpenStatus()">
            <figure>
              <img :src="openIcon1">
              <figcaption>更多</figcaption>
            </figure>
          </div>
          <div v-else class="course_item" @click="changeOpenStatus()">
            <figure>
              <img :src="closeIcon1">
              <figcaption>收起</figcaption>
            </figure>
          </div>
        </template>
      </div>
    </div>
    <div class="image">
      <img :src="image" />
    </div>
    <!-- 推荐课程 -->
    <div v-if="!logined" class="recommended_course_container">
      <header class="recommended_course_header">
        <span>推荐课程</span>
      </header>
      <div class="course_container">
        <div v-if="highlightCoureseList.length==0" class="placehold">暂时没有学习课程</div>
        <div v-for="(item,index) in highlightCoureseList" :key="index" class="course_item" @click="routerToDetail(item.courseid)">
          <div class="item_img"><img v-bind:src="item.coverurl" /></div>
          <div class="item_desc">
            <div class="title">
              <span class="main">{{item.title}}</span>
              <span class="sub">{{item.courseleveltype | level}}·{{item.coursetype | isPublic}}</span>
            </div>
            <div class="desc">
              <p v-if="item.contentsummary" v-clampy="row">{{item.contentsummary}}</p>
            </div>
            <div class="time">
              <span> 课时：{{item.necessaryduration}}课时</span>
              <img :src="clickToPlay" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 我的课程 -->
    <div v-if="logined" class="recommended_course_container">
      <header class="recommended_course_header">
        <span>我的课程</span>
      </header>
      <div class="course_container">
        <div v-if="myCoureseList.length==0" class="placehold">暂时没有学习课程</div>
        <div v-for="(item,index) in myCoureseList" :key="index" class="course_item" @click="routerToDetail(item.courseid)">
          <div class="item_img"><img v-bind:src="item.coverurl" /></div>
          <div class="item_desc">
            <div class="title">
              <span class="main">
                {{item.title}}
              </span>
              <span class="sub">{{item.courseleveltype | level}}·{{item.coursetype | isPublic}}</span>
            </div>
            <div class="desc">
              <p v-if="item.contentsummary" v-clampy="row">{{item.contentsummary}}</p>
            </div>
            <div class="time">
              <span>学习进度:&nbsp;&nbsp;{{Math.round(item.progress)}}%</span>
              <img :src="clickToPlay" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <footer-nav></footer-nav>
  </div>
</template>

<script type="text/ecmascript-6">
import footerNav from '@/components/footer/footer'
import pubMoreIcon from '@/assets/images/更多.png'
import allMoreIcon from '@/assets/images/更多 (2).png'
import image from '@/assets/images/海量课程图片.png'
import clickToPlay from '@/assets/images/点击播放.png'
import api from '@/api/index'
import util from '@/utils'
export default {
  data () {
    return {
      row: 2,
      opened: false,
      publicOpened: false,
      swipeList: [],
      allCourseList: [],
      pubCourseList: [],
      highlightCoureseList: [],
      myCoureseList: [],
      logined: false
    }
  },

  updated () {
    this.$nextTick(() => {
      var to = this.$route.query.to
      if (to) {
        var doc = document.getElementById(to)
        if (this.opened && doc) {
          window.scrollTo(0, doc.offsetTop)
        }
      }
    })
  },

  created () {
    // 设置登录状态
    this.logined = util.checkUserLogined()
    // 获取所有课程列表
    this.opened = this.$route.query.opened
    if (!this.logined) {
      // 获取推荐课程列表
      api.getCourseList({
        params: {
          highlight: 'TURE',
          pagesize: 5
        }
      }).then(resp => {
        this.highlightCoureseList = resp.result || []
      })
    } else {
      // 获取我的课程
      console.log('working')
      api.getMyCourseList().then(resp => {
        this.myCoureseList = resp.result || []
      })
    }
    // 获取首页数据(轮播图
    api.getIndex({
      params: {
        pagesize: 5
      }
    }).then(resp => {
      this.swipeList = resp.result.bannerList
      this.allCourseList = util.findFieldEq('coursetype', 'PROFESSIONAL', resp.result.courselist)
      this.pubCourseList = util.findFieldEq('coursetype', 'PUBLIC', resp.result.courselist)
    })
  },
  computed: {
    allCourseListNine () {
      if (this.opened) {
        return this.allCourseList
      } else {
        if (this.allCourseList.length > 9) {
          return this.allCourseList.slice(0, 9)
        } else {
          return this.allCourseList
        }
      }
    },
    allPublicCourseListNine () {
      if (this.publicOpened) {
        return this.pubCourseList
      } else {
        if (this.pubCourseList.length > 4) {
          return this.pubCourseList.slice(0, 4)
        } else {
          return this.pubCourseList
        }
      }
    },
    openIcon () {
      return pubMoreIcon
    },
    closeIcon () {
      return pubMoreIcon
    },
    openIcon1 () {
      return allMoreIcon
    },
    closeIcon1 () {
      return allMoreIcon
    },
    image () {
      return image
    },
    clickToPlay () {
      return clickToPlay
    },
    imgHeight () {
      console.log((window.innerWidth - 32) * 0.42 + 'px')
      return (window.innerWidth - 32) * 0.42 + 'px'
    },
    bannerHeight () {
      return (window.innerWidth - 32) * 0.42 + 40 - 0 + 'px'
    },
    minHeight () {
      return (window.innerHeitht) + 'px'
    }
  },
  filters: {
    isPublic (data) {
      if (data === 'PUBLIC') {
        return '公共课'
      } else if (data === 'PROFESSIONAL') {
        return '专业课'
      } else {
        return '无'
      }
    },
    level (data) {
      if (data === 'LOW') {
        return '初级'
      } else if (data === 'MIDDLE') {
        return '中级'
      } else if (data === 'HIGH') {
        return '高级'
      } else {
        return '无'
      }
    }
  },
  components: {
    footerNav
  },

  methods: {
    changeRouter (type, infoid) {
      if (type === 'INFORMATION') {
        this.$router.push({
          path: '/information/detail',
          query: {
            id: infoid,
            from: 'index'
          }
        })
      } else {
        this.routerToDetail(infoid)
      }
    },
    routerToDetail (courseid) {
      this.$router.push({
        path: '/index/courseInfo',
        query: {
          courseid: courseid
        }
      })
    },
    changeOpenStatus () {
      this.opened = !this.opened
    },
    changePublicOpenStatus () {
      this.publicOpened = !this.publicOpened
    }
  }
}
</script>

<style lang="scss" scoped>
@import '../../assets/css/mixin.scss';
$scale: 1px;
$font-scale: 1.2;
.index {
  background-color: #f8f9fa;
  padding-bottom: 80px;
}

.index_nav {
  padding: 16 * $scale;
  .swipe-wrapper {
    img {
      /*width: 9rem;*/
      width: 100%;
      border-radius: 5 * $scale;
    }
  }
}

.public_courses_container {
  .public_course_header {
    margin-left: 16 * $scale;
    margin-right: 16 * $scale;
    text-align: left;
    line-height: 25 * $scale;
    height: 32 * $scale;
    border-bottom: 1 * $scale solid #d9d9d9;
    span {
      font-size: 15 * $scale;
      padding-left: 6 * $scale;
      border-left: 4.5 * $scale solid #003686;
      color: #003686;
      font-weight: bold;
    }
  }
  .course_container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10 * $scale;
    margin-bottom: 10 * $scale;
    .course_item {
      margin-top: 10 * $scale;
      margin-bottom: 10 * $scale;
      width: 20%;
      text-align: center;
      img {
        width: 24 * $scale;
        height: 24 * $scale;
      }
      figcaption {
        font-size: 12px;
        color: #636363;
      }
    }
  }
}

.all_courses_container {
  border: 1 * $scale solid #d9d9d9;
  border-radius: 5 * $scale;
  background-color: #ffffff;
  margin-left: 10 * $scale;
  margin-right: 10 * $scale;
  .all_course_header {
    margin-top: 15 * $scale;
    margin-left: 6 * $scale;
    margin-right: 6 * $scale;
    text-align: left;
    line-height: 25 * $scale;
    height: 38 * $scale;
    border-bottom: 1 * $scale solid #d9d9d9;
    span {
      font-size: 15 * $scale;
      padding-left: 6 * $scale;
      border-left: 4.5 * $scale solid #003686;
      color: #003686;
      font-weight: bold;
    }
  }
  .course_container {
    display: flex;
    flex-wrap: wrap;
    margin-top: 10 * $scale;
    margin-bottom: 10 * $scale;
    .course_item {
      width: 20%;
      margin-top: 10 * $scale;
      margin-bottom: 10 * $scale;
      text-align: center;
      img {
        width: 24 * $scale;
        height: 24 * $scale;
      }
      figcaption {
        font-size: 12 * $scale;
        color: #595357;
      }
    }
  }
}

.image {
  img {
    width: 100%;
  }
  width: 100%;
  background-color: #ffffff;
  border-top: 1px solid #e9eaeb;
  border-bottom: 1px solid #e9eaeb;
  padding: 8px 10px 8px 10px;
  margin-top: 20px;
}

.recommended_course_container {
  .recommended_course_header {
    margin-top: 12px;
    margin-bottom: 12px;
    height: 32px;
    line-height: 32px;
    background-color: #0066cc;
    color: #fff100;
    font-size: 15px;
    text-align: center;
    width: 100px;
    border-top-right-radius: 15.5px;
    border-bottom-right-radius: 15.5px;
    span {
      font-weight: bold;
    }
  }
  .course_container {
    margin-top: 6px;
    margin-bottom: 6px;
    margin-right: 10px;
    margin-left: 10px;
    .course_item {
      margin-top: 6px;
      margin-bottom: 6px;
      padding: 5.5px 8px 5.5px 8px;
      margin-top: 6px;
      margin-bottom: 6px;
      background-color: #ffffff;
      border-radius: 3px;
      border: 1px solid #efefef;
      display: flex;
      .item_img {
        width: 117px;
        img {
          border-radius: 5px;
          border: 1px solid #efefef;
          width: 117px;
          height: 82px;
        }
      }
      .item_desc {
        text-align: left;
        padding-left: 14px;
        width: 70%;
        .title {
          height: 24px;
          .main {
            font-weight: bold;
            font-size: 15px;
            color: #000000;
          }
          .sub {
            margin-left: 14px;
            font-size: 11px;
            color: #999999;
          }
        }
        .desc {
          font-size: 11.5px;
          line-height: 18px;
          color: #666666;
        }
        .author {
          font-size: 11.5px;
          line-height: 18px;
          color: #666666;
        }
        .time {
          display: flex;
          justify-content: space-between;
          height: 22px;
          line-height: 22px;
          font-size: 11px;
          color: #999999;
          img {
            margin-top: auto;
            margin-bottom: auto;
            width: 64px;
            height: 15px;
          }
        }
      }
    }
  }
}
</style>
